<template>
  <div>
    <div class="ccui-multifunctional-table-wrapper">
      <ux-grid
        ref="plxTable"
        keep-source
        widthResize
        show-overflow="title"
        show-summary
        :summary-method="getSummaries"
        @select-all="handleCheckChange"
        @select="handleCheckChange"
        :header-cell-class-name="must"
        :edit-config="{ trigger: 'click', mode: 'cell' }"
        :data ="tableData"
      >
        <ux-table-column title="序号" type="index" width="50" fixed="left" />
        <ux-table-column
          :show-overflow-tooltip="true"
          field="batchNumber"
          title="批次号"
          width="200"
          fixed="left"
        >
          <template v-slot="scope">
            <span>{{ scope.row.batchNumber }}</span>
          </template>
        </ux-table-column>

        <ux-table-column
          :show-overflow-tooltip="true"
          field="materialCode"
          title="设备物资编码"
          width="150"
        >
          <template v-slot:edit="scope">
            <span>{{ scope.row.materialCode }}</span>
          </template>
        </ux-table-column>

        <ux-table-column
          :show-overflow-tooltip="true"
          field="materialName"
          title="设备物资名称"
          width="300"
        >
          <template v-slot:edit="scope">
            <span>{{ scope.row.materialName }}</span>
          </template>
        </ux-table-column>

        <ux-table-column
          :show-overflow-tooltip="true"
          field="materialState"
          title="设备物资说明"
          width="130"
        >
          <template v-slot="scope">
            <span>{{ scope.row.materialState }}</span>
          </template>
        </ux-table-column>

         <ux-table-column
          :show-overflow-tooltip="true"
          field="categoryName"
          title="分类名称"
          width="90"
        >
          <template v-slot:edit="scope">
            <span>{{ scope.row.categoryName }}</span>
          </template>
        </ux-table-column>

        <ux-table-column
          :show-overflow-tooltip="true"
          field="measureUnit"
          title="计量单位"
          width="90"
        >
          <template v-slot:edit="scope">
            <span>{{ scope.row.measureUnit }}</span>
          </template>
        </ux-table-column>

         <ux-table-column
          :show-overflow-tooltip="true"
          field="storageCount"
          title="库存数量"
          width="120"
        >
          <template v-slot:edit="scope">
            <span>{{ scope.row.storageCount }}</span>
          </template>
        </ux-table-column>

        <ux-table-column
          :show-overflow-tooltip="true"
          field="unStockCount"
          title="可用库存数量"
          width="120"
        >
          <template v-slot:edit="scope">
            <span>{{ scope.row.unStockCount }}</span>
          </template>
        </ux-table-column>

        <ux-table-column 
          :show-overflow-tooltip="true"
          field="exwarehouseCount"
          title="出库数量"
          width="120"
          :edit-render="{ autofocus: '.el-input__inner' }"
        >
           <template v-slot:edit="scope">
            <span>{{ scope.row.exwarehouseCount }}</span>
          </template>
        </ux-table-column>

         <ux-table-column
          :show-overflow-tooltip="true"
          field="currencyName"
          title="币种"
          width="90"
        >
          <template v-slot:edit="scope">
            <span>{{ scope.row.currencyName }}</span>
          </template>
        </ux-table-column>

         <ux-table-column
          :show-overflow-tooltip="true"
          field="exchangeRate"
          title="汇率"
          width="90"
        >
          <template v-slot:edit="scope">
            <span>{{ scope.row.exchangeRate }}</span>
          </template>
        </ux-table-column>

        <ux-table-column
          :show-overflow-tooltip="true"
          field="unitPriceWithTax"
          title="含税单价"
          width="140"
          align = "right"
          header-align= "left"
        >
          <template v-slot:edit="scope">
            <span>{{ scope.row.unitPriceWithTax | filterTax }}</span>
          </template>
        </ux-table-column>

        <ux-table-column
          :show-overflow-tooltip="true"
          field="exwarehouseMoney"
          title="出库金额"
          width="140"
          align = "right"
          header-align= "left"
        >
          <template v-slot:edit="scope">
            <span>{{ scope.row.exwarehouseMoney | filterTax }}</span>
          </template>
        </ux-table-column>

        <ux-table-column
          :show-overflow-tooltip="true"
          field="remark"
          title="备注"
          width="140"
          :edit-render="{ autofocus: '.el-input__inner' }"
        >
           <template v-slot:edit="scope">
            <span>{{ scope.row.remark }}</span>
          </template>
        </ux-table-column>
      </ux-grid>
    </div>
  </div>
</template>

<script>
export default {
  name: "contractList",
  data() {
    return {
      tableData:[],
    };
  },
  props:{
    purchaseList:{
      type:Array,
      default() {
        return [];
      }
    }
  },
  created() {
  },
  watch: {
    purchaseList(data){
      if(data){
        this.tableData = data
      }
    }
  },
  filters: {
    filterTax(value) {
      return Number(value).toFixed(2);
    },
  },
  methods: {
    must(obj) {
      //给表头加必选标识
      if (obj.column.title == "出库数量") {
        return "must";
      }
    },
    handleCheckChange(val) {
      this.tempArr = val.map((item) => item.batchNumber);
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums.push("合计");
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              if (
                column.title == "库存数量" ||
                column.title == "可用库存数量" ||
                column.title == "出库数量" ||
                column.title == "出库金额"
              ) {
                return prev + curr;
              }
            } else {
              return prev;
            }
          }, 0);
          if (column.title == "库存数量") {
            sums[index] = sums[index] ? sums[index].toFixed(3) : "";
          }
          if (column.title == "可用库存数量") {
            sums[index] = sums[index] ? sums[index].toFixed(3) : "";
          }
          if (column.title == "出库数量") {
            sums[index] = sums[index] ? sums[index].toFixed(3) : "";
          }
          if (column.title == "出库金额") {
            sums[index] = sums[index].toFixed(2);
          }
        } else {
          sums[index] = ""; 
        }        
      });
      return [sums];
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-table th.must > .cell:before {
  content: "*";
  color: #ff1818;
  margin-right: 5px;
}

.relationBox {
  display: flex;
  justify-content: center;
  align-items: center;
}

.relationBox .relationRight {
  display: inline-block;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 5px;
}

.operation-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
}

/deep/ .ccui-form .ccui-form-child-table.el-table .el-input .el-input__inner {
  border: 1px solid #ccc;
}

/deep/ .ccui-multifunctional-table-wrapper {
  .el-table td,
  .el-table th.is-leaf {
    border-right: 1px solid #edf2fc;
  }

  .ccui-table-footer {
    padding-top: 0 !important;
  }
}

/deep/ .el-table__footer-wrapper {
  margin-top: 0px;
}

/deep/ .el-button.el-button--primary-font-mini {
  padding: 0 15px !important;
}

// 解决表格定位滚动条无法拖动
/deep/ .el-table__fixed-header-wrapper {
  th {
    pointer-events: auto;
  }
}

/deep/ .el-table__fixed,
/deep/ .el-table__fixed-right {
  pointer-events: none;

  td {
    pointer-events: auto;
  }
}

/deep/ .elx-table.is--empty .elx-table--empty-placeholder {
  top: 40px !important;
  height: 40px !important;
}

/deep/ .elx-table .elx-body--column.col--ellipsis,
.elx-table.elx-editable .elx-body--column {
  font-size: 13px;
}

.my-input-sc {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  -webkit-appearance: none;
  background-color: #ffffff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  font-size: inherit;
  outline: none;
  padding: 0 8px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
</style>
